<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist 增删</title>
</head>
<body>
    <input id="inp" type="text">
    <button id="btn">新增</button>

    <ul id="list"></ul>

    <script>

        const btn = document.querySelector('#btn');
        const inp = document.querySelector('#inp');
        const ul = document.querySelector('#list');

        // 绑定事件新方式 add: 添加 event: 事件  listen: 听  listener: 监听器
        // 第一个参数: 事件名
        // 第二个参数: 事件处理程序
        // 第三个参数: 先不用知道
        // 新增
        btn.addEventListener('click', function () {
            // 点击时需要做的事
            // 1. 创建li
            // 2. 让li的内容为input的值
            // 3. 把li追加至ul

            const li = document.createElement('li');
            const span = document.createElement('span');
            span.innerText = inp.value; // 清空span并添加内容
            li.appendChild(span);

            // 删除
            // 1. 创建按钮
            // 2. 绑定事件
            // 3. 把按钮追加至li
            // del: delete缩写（删除）btn: button缩写（按钮）
            const delBtn = document.createElement('button');
            delBtn.innerText = '删除';
            delBtn.addEventListener('click', function () {
                // 点击删除时需要做的事
                ul.removeChild(li);
            });
            li.appendChild(delBtn); // 追加一个元素

            // 将处理完成的li追加至ul
            ul.appendChild(li);

            // 重置input  提升用户体验
            inp.value = '';
        });

    </script>
    
</body>
</html>